<!-- 该页面需要改适配 -->
<template>
    <div class="wrapper">
        <van-overlay :show="showOverlay"/>
        <van-loading v-show="showOverlay" size="12vw" color="white" class="loading" vertical/>
        <div id="share-container">
            <!-- <div class="bg"></div> -->
            <div class="logo" ref="logo">
                <img src="@/assets/images/tju-word.svg" alt=""/>
            </div>
            <div id="img-pos" ref="img">
                <Comment ref="comment" v-if="!showFakeImg"></Comment>
                <img src="../assets/images/fakeimg.png" alt="" style="width:100%; height:100%;" v-else>
            </div>
            <div class="num-div">全球已有 <span style="color:#72ADF0;">{{ num }}</span> 位天大人点亮地图</div>
            <div class="grade-div">我是 <span style="color:#72ADF0;">{{ grade }}</span> 级校友</div>
            <div class="location-div">我在 <span style="color:#72ADF0;">{{ location }}</span> 为母校送上祝福</div>
            <div class="qrcode">
                <vue-qr backgroundColor="#0F3360" colorDark="#ffffff" colorLight="#0F3360" :text="src"
                        :size="120"></vue-qr>
            </div>
            <div class="long-press" >快截屏分享吧</div>
            <!-- <img class="arrow" :src="$route.params.img"> -->
        </div>
        <!-- <img :src="page" style="height:100%;width:100%;" v-else> -->
    </div>
</template>
<script>
import Comment from '../components/comment/comment.vue';
import VueQr from 'vue-qr';
import { getUserCount } from "../api/api";
import Cookies from 'js-cookie';

export default {
    name: 'Location',
    created () {
      // document.getElementsByTagName('html')[0].style.transform=''
    },
    mounted() {
        if (this.isIOS()) {
            this.showFakeImg = true;
        } else {
            let inp = document.querySelector('.input-div');
            inp.style.opacity = 0;
            let fly = document.querySelector('.fly-container');
            fly.style.opacity = 0;
        }
        this.showOverlay = true;
        setTimeout(() => {
            this.showOverlay = false;
        }, 700);
        this.$nextTick(() => {
            //this.$refs.comment.getCapture();
            console.log(this.$refs.comment);
        })
        getUserCount().then((res) => {
            console.log(res);
            this.num = res.data.detail;
        })
        let _this = this
/*         setTimeout(() => {
            let container = document.querySelector("#share-container")
            const width = container.offsetWidth;
            const height = container.offsetHeight;
            const scale = window.devicePixelRatio;
            const ops = { //图片配置项
                scale,
                useCORS: true,
                allowTaint: false,
                width,
                height,
            };
            html2canvas(container, ops).then(canvas => {
                _this.page = canvas.toDataURL("image/png");
            });
        }, 200000000000) */
    },
    components: {VueQr, Comment},
    data() {
        return {
            src: `http://${window.location.host}`,
            page: '',
            num: 0,
            grade: Cookies.get('grade'),
            location: Cookies.get('name'),
            showOverlay: false,
            showFakeImg: false,
        }
    },
    methods: {
        isIOS() {
            let u = navigator.userAgent;
            let isios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            return isios;
        }
    }
}
</script>
<style scoped lang="scss">
.wrapper{
    height: 100vh;
    width: 100vw;
    background-color: #0F3360;
    z-index: -1;
}
#share-container {

    height: 100vh;
    width: 100vw;
    z-index: -1;
    display: flex;
    flex-direction: column;
}

/* .bg {
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    //position: fixed;
    z-index: -1;
    background-color: #0F3360;
} */

.logo {
    color: white;
    //position: fixed;
    position: relative;
    left: 6vw;
    z-index: 1;
    display: flex;
    flex-direction: row;

    > img:nth-child(1) {
        width: 36vw;
    }

    > img:nth-child(2) {
        width: 24vw;
        margin-left: -1%;
    }
}


/* .arrow {
    position: absolute;
    width: 100vw;
    top: 12vh;
    left: 0;
} */
#img-pos {
    width: 100%;
    height: 30vh;
    overflow: hidden;
    //margin-top: 25px;
}

.num-div {
    font-size: 4vw;
    color: white;
    //position: fixed;
    width: 100vw;
    bottom: 46vh;
    margin-top: 1vw;
}

.grade-div {
    font-size: 4vw;
    color: white;
    //position: fixed;
    width: 100vw;
    bottom: 40vh;
    margin-top: 1vw;
}

.location-div {
    font-size: 4vw;
    color: white;
    //position: fixed;
    width: 100vw;
    bottom: 36vh;
    margin-top: 1vw;
}

.qrcode {
    //position: fixed;
    width: 100vw;
    bottom: 14vh;
    margin-top: 1vw;
}

.long-press {
    font-size: 4vw;
    font-weight: bold;
    border-radius: 6px;
    background-color: #2360A4;
    height: 9vw;
    line-height: 9vw;
    color: white;
    //position: fixed;
    left: 30vw;
    width: 40vw;
    bottom: 6vh;
    align-self: center;
    margin-top: 1vw;
}
</style>
<style lang="scss">
html{
    overflow: hidden;
    transform:rotate(0deg) translate(0vw,0vw)!important;
}
</style>
